
<template>
<div class='output'>
<div class="box">
  <el-table
    :data="tableData"
    height="550"
    style="width: 100%">
    <el-table-column
      prop="name"
      label="货物名称"
      width="180"
      >
    </el-table-column>
    <el-table-column
      prop="number"
      label="货物数量"
      width="180"
      >
    </el-table-column>
    <el-table-column
      prop="category"
      label="货物种类"
      width="180"
     >
    </el-table-column>
    <el-table-column
      prop="warehouseEntryTime"
      label="入库时间"
      width="180"

      >
    </el-table-column>
     <el-table-column
      prop="locationId"
      label="库区"
      >
    </el-table-column>
     <el-table-column
      label="操作"

      >
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row);dialogFormVisible = true" type="text" size="small">出库</el-button>
         <!-- 弹窗 -->
        <el-dialog title="出库填写" :visible.sync="dialogFormVisible">
     <el-form :model="outGoods">
     <el-form-item  @click.native="Time" label="出库时间: " :label-width="formLabelWidth">
      <el-input style="width:300px" v-model="outGoods.deliveryTime" disabled="disabled"></el-input>
    </el-form-item>
    <el-form-item label="出库员: " @click.native="user" :label-width="formLabelWidth" >
     <el-input style="width:300px" v-model="outGoods.outUserId" disabled="disabled"></el-input>
    </el-form-item>
    <el-form-item label="提货人: "  :label-width="formLabelWidth" >
     <el-input style="width:300px" v-model="outGoods.consignee"></el-input>
    </el-form-item>
     <el-form-item label="联系方式: " :label-width="formLabelWidth" >
     <el-input style="width:300px" v-model="outGoods.consigneeConnect"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="sure">确 定</el-button>
  </div>
</el-dialog>
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.page.currentPage"
        :page-sizes="[10, 20, 30, 40,50]"

        :page-size="this.page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.page.total"
      >
      </el-pagination>
   </div>
   </div>
</div>
</template>
<script>
import axios from '../../../axios'
export default {
  inject: ['reload'],
  data () {
    return {
      userName: localStorage.currentUser_name,
      tableData: [{}],
      page: {
        // 当前页码
        currentPage: 1,
        // 每页条数
        pageSize: 10,
        // 数据总条数
        total: ''
      },
      dialogFormVisible: false,
      outGoods: {
        deliveryTime: '',
        outUserId: '',
        category: '',
        consignee: '',
        consigneeConnect: '',
        locationId: '',
        goodsId: '',
        outGoodsNumber: ''
      },

      formLabelWidth: '120px'
    }
  },
  methods: {

    // 获取当前用户
    user () {
      this.outGoods.outUserId = this.userName
      return this.outGoods.outUserId
    },
    // 获取当前系统时间
    getTime () {
      var date = new Date()
      var seperator1 = '-'
      var seperator2 = ':'
      // 以下代码依次是获取当前时间的年月日时分秒
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      var minute = date.getMinutes()
      var hour = date.getHours()
      var second = date.getSeconds()
      // 固定时间格式
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      if (hour >= 0 && hour <= 9) {
        hour = '0' + hour
      }
      if (minute >= 0 && minute <= 9) {
        minute = '0' + minute
      }
      if (second >= 0 && second <= 9) {
        second = '0' + second
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate +
      					' ' + hour + seperator2 + minute + seperator2 + second
	  return currentdate
    },

    Time () {
      this.getTime()
      this.outGoods.deliveryTime = this.getTime()
    },
    sure () {
      this.dialogFormVisible = !this.dialogFormVisible,
      console.log(this.outGoods)
      axios({
        url: '/dp/out-goods/out',
        method: 'Post',
        data: JSON.stringify(this.outGoods)
      }).then(res => {
        console.log(res)
        this.tableData = res.data.data.records
        this.page.total = parseInt(res.data.data.total)
      }).catch(err => {
        this.$alert(err.response.data.msg, '请联系管理员', {
          confirmButtonText: '确定',
          callback: action => {

          }
        })
      })
      this.reload()
    },
    handleClick (row) {
      console.log(row)
      this.outGoods.goodsId = row.id
      this.outGoods.locationId = row.locationId
      this.outGoods.outGoodsNumber = row.number
      console.log(this.outGoods.goodsId)
      console.log(this.outGoods.outGoodsNumber)
    },

    handleSizeChange (val) {
      // 条数选择
      this.page.pageSize = val
      this.page.currentPage = 1
      axios({
        url: '/dp/queryNoVerification',
        method: 'GET',
        params:
        {
          currentPage: this.page.currentPage,
          pageSize: this.page.pageSize
        }
      }).then(res => {
        this.tableData = res.data.data.records
        this.page.total = parseInt(res.data.data.total)
      }).catch(err => {
        this.$alert(err.response.data.msg, '请联系管理员', {
          confirmButtonText: '确定',
          callback: action => {
          }
        })
      })
    },
    handleCurrentChange (val) {
      this.page.currentPage = val
      console.log(`当前页: ${val}`)
      axios({
        url: '/dp/queryNoVerification',
        method: 'GET',
        params:
        {
          currentPage: this.page.currentPage,
          pageSize: this.page.pageSize
        }
      }).then(res => {
        console.log(res.data.data.records)
        this.tableData = res.data.data.records
        this.page.total = parseInt(res.data.data.total)
      }).catch(err => {
        this.$alert(err.response.data.msg, '请联系管理员', {
          confirmButtonText: '确定',
          callback: action => {

          }
        })
      })
    }

  },
  created () {
    console.log(this.page)
    axios({
      url: '/dp/queryNoVerification',
      method: 'GET',
      params:
        {
          currentPage: this.page.currentPage,
          pageSize: this.page.pageSize
        }
    }).then(res => {
      console.log(res)
      this.tableData = res.data.data.records
      this.page.total = parseInt(res.data.data.total)
      console.log(this.page.total)
    }).catch(err => {
      console.log(err.response)
      this.$alert(err.response.data.msg, '请联系管理员', {
        confirmButtonText: '确定',
        callback: action => {

        }
      })
    })
  }
}
</script>

<style lang='less' scoped>
/deep/.cell
{
  font-weight: bold;
  font-size: 20px;
  color: rgb(61, 59, 59);
}
/deep/input::-webkit-input-placeholder {
  color: grey;
  font-weight:bold;
  font-size: 15px;
}

/deep/.el-input__inner {
  background-color: transparent !important;
  border: 1px solid #1296db;
  font-weight:bold;
  font-size: 22px;
}
/deep/.el-form-item__label {
  font-weight:bold;
  font-size:14px;
}
.output{
  height: 670px;
    width: 1200px;
    margin: 0 auto;
    display: flex;
    position: relative;
.box{
    margin: 100px 150px;
    height: 500px;
    width: 880px;

/deep/.el-pagination{
  .el-pagination__total{
  font-weight: bold;
  font-size: 20px;
  color: rgb(61, 59, 59);
}
.el-input__inner{
  font-weight: bold;
  font-size: 20px;
  color: rgb(61, 59, 59);
}
.button{
  font-weight: bold;
  font-size: 20px;
  color:rgb(61, 59, 59);
}
.el-pager
.number{
  font-weight: bold;
  font-size: 20px;

}
.el-pagination__jump{
  font-weight: bold;
  font-size: 20px;
  color:rgb(61, 59, 59);
}
}
}
}

</style>
